<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>微信公众号全英文句子 拂晓语料库 v0.5</title>
<!--
version
v0.1 可用
v0.2 能url分页
v0.3 分页按钮
v0.4 添加句子按钮
v0.5 从拂晓语料复制过来，修改界面
v0.6 淡化标题
v0.7 纠正标题颜色浅的问题: h4 to h5
v0.8 添加半透明背景：画像和星空切换
v0.9 js中转义
v1.0 界面微调
v1.1 匹配后大小写保持不变

-->

<script src="/static/js/jquery.min.js"></script>
<style>
/*
#1AAD19#9CE99B
body{background:#95a295;}
*/
div,p,span{margin:0;padding:0;}
.wrap{max-width:800px;  margin:10px auto; font-size:1em; }

#boxes{}

.box{
	opacity: 0.8;
	background:rgba(255,255,255, 1);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    border-radius: 10px;
	margin-bottom:10px;
	
	padding:0px 10px 10px 10px;/*top,right,b,l*/
	border-left:3px solid #eee;
	
	box-shadow: 0 2px 10px #999;
    -moz-box-shadow: #999 0 2px 10px;
    -webkit-box-shadow: #999 0 2px 10px;
}
.box:hover{border-left-color:#f00; opacity: 1;}
.box a{text-decoration: none;}
.box a:hover{text-decoration: underline;}
.even{background: rgba(239,245,221,1);}

.light,.light a{color:#ccc; font-size:smaller;}

.highlight{color:red;font-weight:bold; /*font-style: italic;*/ }

span.highlight2,
span.highlight{border-bottom:thin dotted rgba(255,0,0,0.4);}

.pages{width:300px; margin:0 auto; padding:0; text-align:center;}
.pages button{padding:10px;width:100px; cursor:pointer; opacity: 0.2;}




/* button in the middle */
.middle{width:300px; margin:30px auto; padding:0; text-align:center;}
.middle a{ text-decoration:none; 
	padding:5px;
	/*background-color: rgba(255,206,206,0.5);*/
	border:1px solid #FD6C6C;
	color: #FD6C6C;
}
.middle a:hover{color:red;}

h5{margin:0;padding:0; color:#ddd;}




/* add blur background picture */
.blur_bj{
/*
	background-image:url(/static/image/bg.jpg);
*/
	background-image:url(/static/image/stary_night.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	
	position: fixed;
	/*position: absolute*/ 
	top: 0; left:0;
	
	filter: blur(5px);
	/*backdrop-filter: blur(6px); */
	
	z-index: -1;
	opacity: 0.5;
}


/*footer*/
.bgBlack{text-align:center; color:#666; }
.bgBlack a{color:#666; text-decoration:none;}
.bgBlack a:hover{color:red; text-decoration:underline;}
</style>

</head>


<body>
<div class='blur_bj'></div>


<div class='pages'>
	<button>Previous</button>
	<button>Next</button>
</div>

<div class=wrap>
	<div id='boxes'></div>
</div>

<div class='pages'>
	<button>Previous</button>
	<button>Next</button>
</div>

<!-- 
<div class=middle>
</div>
-->


<div class='wrap bgBlack'>
	&copy;2022
	- 2025
	<a target="_blank" href="/en/">英语读报</a> |
	<a target="_blank" href="/">首页</a> | 
	<a id="dict_" target="_blank" href="index.html">拂晓词典</a>
</div>


<script>
print=console.log
//http://127.0.0.1:20180/api/sentence/word/

//获取url中的参数 https://www.cnblogs.com/vicky-li/p/9145026.html
function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	if (r != null) return unescape(r[2]); return null; //返回参数值
}


$(document).ready(function(){
	//var word=location.search.split('=')[1]
	var word=getUrlParam('word')
	var id=getUrlParam('id')
	var page=getUrlParam('page')
	var url='http://127.0.0.1:20180/api/sentence2/word/'
	
	if(word!=null){
		url+=word
	}else{
		url+="null2"
	}
	if(id!=null){
		url='http://127.0.0.1:20180/api/sentence2/id/'+id;
	}
	if(page!=null){
		url+="?page="+page
	}
	console.log(url)
	$.get(url,function(res,status){
		//wjl=res;
		if(res.length==0){
			html="<div class=box>Nothing found.</div>"
			$('#boxes').append(html)
			return false;
		}
		for(var i in res){
			var lineInfo=res[i], sid=lineInfo[0], line=lineInfo[7], url=lineInfo[1], source=lineInfo[2];
			var title=lineInfo[5], desc=lineInfo[6], date=lineInfo[3];
			
			//js 转义
			title=decodeURI(title);
			desc=desc.replace(/\\x26#39;/g, '’');

			
			//一行分成多个句子
			//var arr=line.split(/[.?!]+\s/);
			//console.log(arr)
			
			//如果有单词，则自动高亮显示
			var sentence=line;
			if(word!=null){
				//分成句子，还保留分隔符？ https://www.iteye.com/blog/happyqing-2077629
				lineWithVertical = line.replace(/\./g, ".|").replace(/\?/g, "?|").replace(/\!/g, "!|");			
				var arr=lineWithVertical.split("|");
				//console.log(i, line,arr)
				//正则动态替换
				var regLoose,reg;
				regLoose=new RegExp( word,'ig')
				reg=new RegExp( '\\b'+word+'\\b','ig'); //标记单词边界
				if(id==null){//没有指定id，则最小化显示句子
					for(var j in arr){
						//最后一个空字符元素不要
						//print('01=====>',j,arr)
						if(arr[j].length==0){
							continue;
						}
						// 匹配后，保证不改变高亮前后的大小写
						if(arr[j].match(reg)){
							//sentence=arr[j].replace(/word/ig,function(word){	
							sentence=arr[j].replace(reg, function(keyword,index,originText){
								const originalWord = originText.substr(index, keyword.length);
								//console.log('>reg:', reg,keyword,index,originText) //关键词  位置 原文
								return("<span class=highlight>"+originalWord+'</span>')
							})
							break;
						}else if(arr[j].match(regLoose)){
							sentence=arr[j].replace(regLoose, function(keyword,index,originText){
								const originalWord = originText.substr(index, keyword.length);
								//console.log('>regLoose:', regLoose, keyword,index,originText) //关键词  位置 原文
								return("<span class=highlight2>"+originalWord+'</span>')
							})
							break;
						}
					}
				}else{//有id，则一行全部显示
					sentence=line.replace(reg, function(keyword, index, originText){
						const originalWord = originText.substr(index, keyword.length);
						return("<span class=highlight>"+originalWord+'</span>')
					})
				}
			}
			//链接信息
			var wordPara=""
			if(word!=null){
				wordPara='&word='+word
				document.getElementById('dict_').href='index.html?word='+word
			}
			
			var even=i%2==0?"":" even";
			
			
			//url中有id，则只显示一篇：大标题，带描述。否则小标题，不带描述
			var html_title='<span class=light> | '+title+'</span>'
			if(id!=null){
				html_title='<h4>'+title+'</h4>'+'<p class=light>'+desc+'</p>'
			}
			
			html="<div class='box"+even+"'>"+
				'<span class=light><a target=_blank href="?id='+sid+wordPara+'">#'+sid+'</a> | <a href="'+url+'">['+source+', '+date+']</a></span>'+html_title+
				'<p>'+sentence+'</p>'+
			"</div>"
			
			//console.log(rs)
			$('#boxes').append(html)
		}
	})
	
	//为翻页添加事件
	$('.pages button').click(function(){
		//获取当前url，替换其中的页码
		var url=''
		if(this.innerHTML=='Previous'){
			//console.log('pre')
			url=location.href.replace(/page=(\d+)/,function(a,b){
				b=b<=1?1:--b;
				return 'page='+b;
			})
		}else{
			//console.log('next')
			url=location.href.replace(/page=(\d+)/,function(a,b){
				//这个不知道界限，为节省查询，先暂时这样吧
				return 'page='+(++b)
			})
		}
		location=url;
	})
});





/* 随机替换背景图 */
var BgObj=document.getElementsByClassName('blur_bj')[0]
// 使用github做图床 https://github.com/DawnEve/IELTS/issues/8
var picURLs=["/static/image/face.jpg", "/static/image/stary_night.png", //2个默认背景图
	'/static/image/owl.png', //猫头鹰
	//'https://user-images.githubusercontent.com/5974903/99779125-9361c100-2b4f-11eb-9e2b-76952c92d72d.jpg', //bird
	//'https://user-images.githubusercontent.com/5974903/99779243-bd1ae800-2b4f-11eb-969f-351e59f40870.jpg', //peach
	//'https://user-images.githubusercontent.com/5974903/99779247-bf7d4200-2b4f-11eb-8a64-74f21ff63a03.jpg', //peach-2
]
var picURL=picURLs[new Date().getTime() % picURLs.length] //随机选取一张
BgObj.style['backgroundImage']='url('+picURL+')';





/* 载入划词搜索：仅单个单词*/
var s=document.createElement("script");s.src="http://ielts.dawneve.cc/wordKing/dawnDict.js";document.body.append(s);
</script>

</body>
</html>